<template>
    <div class="app-container">
        <el-form :model="searchForm" inline ref="searchForm" label-width="90px">
            <el-form-item label="应用程序：" prop="appId">
                <el-select v-model="searchForm.appId" placeholder="请选择" clearable>
                    <el-option v-for="item in applicationIdOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="登录时间：">
                <el-date-picker v-model="searchForm.beginTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="登录时间"></el-date-picker>
                <el-date-picker v-model="searchForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="退出时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="init('search')">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
            <el-table-column prop="appName" label="应用" align="center"></el-table-column>
            <el-table-column prop="remoteHost" label="主机号" align="center" width="120"></el-table-column>
            <el-table-column prop="remoteAddress" label="远程地址" align="center" width="120"></el-table-column>
            <el-table-column prop="remotePort" label="远程端口" align="center"></el-table-column>
            <el-table-column prop="userAgent" label="用户代理" align="center"></el-table-column>
            <el-table-column prop="nickName" label="用户" align="center" width="120"></el-table-column>
            <el-table-column prop="creationTime" label="登录时间" align="center" width="160"></el-table-column>
            <el-table-column prop="lastAccessedTime" label="退出时间" align="center" width="160"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements" style="padding-top: 20px"></el-pagination>
    </div>
</template>
<script>
import { findInterfaceLogRecord, findLoginLogRecord, getInterfaceLog,getLoginLog } from '@/api/user-management/sys-log'
import { findApplication } from '@/api/application/application'

export default {
    name: 'LoginLog',
    data() {
        return{
            searchForm: {
                appId: '',
                beginTime: '',
                endTime: ''
            },
            tableData: [],
            pageSize: 10,
            nowPage: 0,
            pageData: {},
            applicationIdOpt: []
        }
    },
    mounted () {
        this.init()
        this.applicationList()
    },
    methods: {
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            findLoginLogRecord(_this.nowPage, _this.pageSize,_this.searchForm.appId,_this.searchForm.beginTime,_this.searchForm.endTime).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object;
                    _this.tableData = response.object.content
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        applicationList(){
            const _this = this;
            //获取列表信息
            findApplication({ page: 0, size: 10000, name: '' }).then(response => {
                if(response.code == 200){
                    _this.applicationIdOpt = response.object.content;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
    }
}
</script>
